<template>
<div class="hello" >
<el-dialog v-model="dialogVisible" title="Tips" :width="dialogWidth" draggable :modal="false" :close-on-click-modal="false" :append-to-body="false"
:show-close="false" custom-class="test" class="ok" ref="dialog" modal-class="modalClass" v-bind="$props"  v-demo="{ color: 'white', text: 'hello!' }">
	<template v-for="(index, name) in $slots" v-slot:[name]="data">
		<div class="resize"  @mousedown="onMouseDown" v-if="name=='default'"></div>
		<slot :name="name" v-bind="data"/>
	</template>
	<!--
	<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
	  <slot :name="name" v-bind="data"></slot>
	</template>
	-->
</el-dialog>
</div>
</template>

<script setup>
import { ref } from 'vue'
import { reactive, watch } from 'vue'

import { useSlots } from 'vue';
 
const data = useSlots();



const dialogVisible = ref(true)
const value1 = ref(0)
const dialog = ref(null);
const dialogWidth = ref(560);

const font = reactive({
  color: 'rgba(0, 0, 0, .15)',
})

function get(translates){
	if(translates=="none"){
		return [0,0]
	}
	let str = translates.replace(")","");
	let split = str.split(',');
	return [Number(split[split.length-2]),Number(split[split.length-1])]
}

let offsetX=0;
let offsetY=0;
let initWidth=0;
let initHeight=0;
let inittransform=[0,0];

let rect=[0,0];

let dom=null;
function onMouseDown(oEvent){
	dom=document.getElementsByClassName("ok")[0];
	var computedStyle=window.getComputedStyle(dom)
	var initialHeight=parseFloat(computedStyle.height);
	offsetX=oEvent.pageX;
	offsetY=oEvent.pageY;
	initWidth=dialogWidth.value;
	initHeight=initialHeight;
	inittransform=get(computedStyle.transform); 
	
	let info=dom.getBoundingClientRect();
	// rect=[info.x,info.y];
	rect=[info.x,info.y]
	
	dom.style.marginLeft=computedStyle.marginLeft;
	
	// dom.style.left=info.x+"px";
	// dom.style.top=info.y+"px";;
	// dom.style.margin="0 0 0 0";
	// dom.style.transform=`translate(0px,0px)`;
	
	addEventHandler(document, "mousemove", handleMouseMove);
	addEventHandler(document, "mouseup", handleMouseUp);
	addEventHandler(window, "blur", handleMouseUp);
	document.body.style.cursor = 'se-resize'
	oEvent.preventDefault();
}

function handleMouseMove(oEvent) {
	dialogWidth.value=initWidth+oEvent.pageX-offsetX;
	dom.style.height=(initHeight+oEvent.pageY-offsetY)+"px";
	//dom.style.transform=`translate(${inittransform[0]+((oEvent.pageX-offsetX)/2)}px,${inittransform[1]}px)`;
}
	
function handleMouseUp(e){
	removeEventHandler(document, "mousemove", handleMouseMove);
	removeEventHandler(document, "mouseup", handleMouseUp);
	removeEventHandler(window, "blur", handleMouseUp);
	document.body.style.cursor = ''
}

var isIE = (document.all) ? true : false;
function addEventHandler(oTarget, sEventType, fnHandler) 
{
	if (oTarget.addEventListener) 
	{
		oTarget.addEventListener(sEventType, fnHandler, false);
	} 
	else if (oTarget.attachEvent) 
	{
		oTarget.attachEvent("on" + sEventType, fnHandler);
	} 
	else 
	{
		oTarget["on" + sEventType] = fnHandler;
	}
};
function removeEventHandler(oTarget, sEventType, fnHandler) {
    if (oTarget.removeEventListener) {
        oTarget.removeEventListener(sEventType, fnHandler, false);
    } else if (oTarget.detachEvent) {
        oTarget.detachEvent("on" + sEventType, fnHandler);
    } else { 
        oTarget["on" + sEventType] = null;
    }
};
</script>
<style>
body{background-color: #f2f3f5;}
.hello{pointer-events: none;}
.ok{
	pointer-events: auto;
}
.resize{
  position: absolute;bottom: 0px;right: 0px;
  cursor: se-resize;
}
.resize:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-top: 9px solid transparent;
    border-right: 9px solid transparent;
    border-radius: 3px;
}

.resize:hover:after {
    border-right: 9px solid #606266;
}
.modalClass .el-overlay-dialog{overflow-x: hidden;}
</style>